<template>
  <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="What needs to be done?" autofocus v-model.trim="name" @keyup.enter="add(name)">
      </header>
</template>

<script>
export default {
   data(){
       return {
           name:''
       }
   },
   methods:{
       add(name){
           if(!this.name) return alert('请输入任务名')
          this.$emit('add',name)
          this.name = ''
       }
   }
}
</script>

<style>

</style>